Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg viewBox="0 0 100 100" id="babyProgression">
	<path d="M 36 62.8 C 14 94 45 98 59 98 C 79 98 83 77 83 64 C 80 26 63 4 43 4 C 18 4 14 29 28 47 C 34 55 36.6 59.2 36 60.9 Z" />
	<g fill="#A020F0" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5">
		<path class="umbilical" d="">
			<animate attributeName="d" values="M 53.7 50.3 Q 52.2 50.3 50.2 49.7 C 47.6 49 42.9 55.3 36.5 60.9 V 62.8 C 49.1 50.3 50.8 51.5 52 53.1 Q 53.1 55.5 54.7 54.4 C 56.9 52.6 57 49.1 53.7 50.3; M 56 51 Q 53.7 50.8 50.7 53.2 C 48.8 53.3 46.8 53.4 36.5 60.9 V 62.8 C 47.2 55.6 48.5 54.9 52 56 Q 54 57 55.6 55.5 C 58 53 59 51 56 51; M 56 48 Q 53.4 53 54.1 55.7 C 51.4 57 50 53 36.5 60.9 V 62.8 C 50 55 50 58 55 57 Q 55 59 57.6 58.7 C 62 58 59 42 56 48; M 58 47 Q 53.4 53 55.5 57.7 C 51.4 57 51.8 55.7 36.5 60.9 V 62.8 C 50.2 56.3 52.3 60 56.2 59.3 Q 58 62 60.9 60.4 C 65 58 61 43 58 47; M 59 46 Q 54 53 54 59 C 48 56 42 59 36.5 60.9 V 62.8 C 42 61 49 58 54 61 Q 55 66 58 64 C 67 58 63 43 59 46; M 58 46 Q 55 52 58 60 C 55 58 45 63 36.5 60.9 V 62.8 C 46 65 51 60 58 62 Q 64 66 65 64 C 69 56 62 38 58 46; M 60 46 Q 56 49 55 61 C 46.3 58 41.3 59.5 36.5 60.9 V 62.8 C 49.4 60.7 55.5 63.8 56.6 69 Q 60 75 66 69 C 74 61 67 41 60 46; M 60 43 Q 55 47 53 58 C 42.5 64.4 41.2 60.7 36.5 60.9 V 62.8 C 47.2 63.5 50.9 64.2 54 65 Q 59 80 69 70 C 77 61 68 37 60 43;  M 56 48 Q 47 57 46.5 63.3 C 44 63.8 43.6 62.7 36.5 60.9 V 62.8 C 42.2 63.5 43.8 66 46.5 66.3 Q 65 89 71 74 C 78 57 71 33 56 48; M 53 48 Q 45 57 44.6 69.2 C 40.4 67.9 46.8 63.9 36.5 60.9 V 62.8 C 44 64.5 37.6 69.7 44.4 71.7 Q 63 99 71.1 79.6 C 84 46 62 37 53 48" dur="100s" begin="0" repeatCount="none" fill="freeze" />
		</path>
		<path class="bodyHead" d="">
			<animate attributeName="d" values="M 55.1 53.6 Q 55.2 52 53.4 52.8 Q 52.4 54.3 52.2 54.1 Q 52.1 53.7 52.2 52.6 A 1 1 0 0 0 51.9 52.3 L 51.5 52.1 L 51.4 52 A 1 1 0 0 0 51.1 51.7 L 51 51.5 L 50.8 51.3 A 1 1 0 0 0 50.7 51.6 L 50.7 51.8 L 50.6 52 A 1 1 0 0 0 50.7 52.3 Q 50.5 52.3 50.7 52.4 Q 50.5 52.4 50.6 53.6 Q 50.7 54.7 51.6 55.4 Q 53 56.4 54.5 56.2 Q 55.7 55.8 56.3 54.9 Q 57.3 53.7 58.3 49.4 Q 59.4 46.9 56.4 45.8 Q 55.9 45.7 55.3 45.8  C 52.6 43.5 51.7 45.3 50.7 48.1 Q 50.8 48.7 51.4 49.4 Q 51.8 49.9 52.1 49.9 Q 52.3 50.1 52.5 49.9 A 1 1 0 0 0 52.9 49.8 A 1 1 0 0 0 53.5 49.9 Q 53.9 50.1 54 50.1 Q 54 50.7 55 49.2; M 55.1 53.6 Q 52.8 53.3 52 55.4 Q 51.7 56 51.6 55.7 Q 51.2 55.7 51.1 55.3 A 1 1 0 0 0 50.4 55.2 L 50.4 55.2 L 50.4 55.2 A 1 1 0 0 0 50 55.3 L 50 55.3 L 49.6 55.3 A 1 1 0 0 0 49.7 55.3 L 49.4 55.6 L 49.2 55.9 A 1 1 0 0 0 48.9 56.4 Q 48.5 57.5 48.8 58.5 Q 49.1 59.2 49.7 59.3 Q 50.8 59.7 52.4 59.2 Q 54.5 58.7 56.3 57.7 Q 57.6 57 58.2 56.1 Q 60.3 54.5 60.8 48.8 Q 61.1 44.2 56.5 43.2 Q 55.6 43.1 54.9 42.7 C 50.2 39.9 44.4 44.4 48.8 49.8 Q 49.4 50.6 50 50.7 Q 50.4 50.8 50.8 50.7 Q 51.2 51.1 51.5 50.9 A 1 1 0 0 0 52 50.8 A 1 1 0 0 0 52.8 50.9 Q 53.1 51.1 53.6 50.8 Q 54 50.7 55 49.2; M 56.9 57.6 Q 52.6 55.9 52 58.5 Q 51.5 59.6 51.6 61.6 Q 50.5 61.9 49.7 61.8 A 1 1 0 0 0 49.4 62.4 L 49.5 62.4 L 49.4 62.4 A 1 1 0 0 0 49.6 62.6 L 49.6 62.6 L 49.8 62.8 A 1 1 0 0 0 49.8 62.8 L 50.1 63 L 50.1 62.9 A 1 1 0 0 0 50.5 63.1 Q 51.1 62.8 51.8 62.9 Q 52.8 62.9 52.7 61.8 Q 52.8 60.7 53.1 59.1 Q 53.3 58.3 56.4 60.2 Q 59.1 61.2 60.1 58.1 Q 60.6 55.5 61.1 51.1 Q 61.9 47.9 58.7 43.6 Q 58.2 43 57.8 41.9 C 54.5 32.7 44.1 40.7 48.5 45.3 Q 49.5 46 50.2 46.3 Q 50.7 46.5 50.7 47 Q 50.7 47.9 51.9 48 A 1 1 0 0 0 52.2 48.1 A 1 1 0 0 0 52.6 48.3 Q 52.9 48.8 53.6 48.4 Q 55.6 47.3 56 45; M 58.7 59.3 Q 52.9 53.9 50.1 59.5 Q 48.7 64.3 48.1 64.6 Q 47.2 65.3 45.2 65.3 A 1 1 0 0 0 45.5 66.3 L 45.5 66.3 L 45.5 66.3 A 1 1 0 0 0 45.8 66.7 L 45.8 66.7 L 45.8 66.8 A 1 1 0 0 0 46 67.1 L 46 67.1 L 46.1 67.4 A 1 1 0 0 0 46.9 67.4 Q 48.2 66.9 49.2 66 Q 51.2 66.5 50.1 64 Q 51.5 62.4 52.8 59.5 Q 55.3 62.5 58.9 63.1 Q 61.4 63.4 62.2 61.3 Q 64.3 57.8 64 51.8 Q 64 46.8 60.4 44.1 Q 59.1 43.2 58.6 41.5 C 56.6 29.8 41.8 36.6 46.5 44.3 Q 47.2 45.6 48.6 46 Q 49 46 49.5 47.1 Q 49.3 48.1 50.8 48.1 A 1 1 0 0 0 51.5 48.6 A 1 1 0 0 0 52.2 48.8 Q 52.1 49.2 53.4 49 Q 55.6 47.3 56 45; M 56.8 62.7 Q 52.9 53.9 49.5 59.3 Q 47.8 62.4 45.7 65.5 Q 44.3 66.6 42.5 66.6 A 1 1 0 0 0 41.5 67.2 L 41.9 67.4 L 41.8 67.4 A 1 1 0 0 0 42.4 68 L 42.5 68.1 L 42.5 68.1 A 1 1 0 0 0 43 68.7 L 43.1 68.7 L 43.2 68.6 A 1 1 0 0 0 43.9 69 Q 45.9 68.3 46.5 67.9 Q 48.8 69 48 65.4 Q 51.5 62.4 51.9 60.7 Q 53.6 67.5 55 67.9 Q 56.7 68.3 58.9 66.2 Q 65.9 60.9 65 52.3 Q 64.5 46.7 62 44.4 Q 61.3 42.7 61.7 41.2 C 66.8 25.3 44.9 27.5 47.8 40.1 Q 48.3 41.8 49.4 42.2 Q 50 42.7 49.9 43.7 Q 49.6 45.2 50.9 44.9 A 1 1 0 0 0 51.9 46.1 A 1 1 0 0 0 52.8 47.1 Q 53.1 47.9 53.8 47.4 Q 57.4 45.1 58.5 43.5; M 63.6 63.2 Q 52.9 53.9 52.7 60.9 Q 52.2 66.9 51.8 70.1 Q 50.4 72.7 47.3 73 A 1 1 0 0 0 48.2 74.3 L 48.8 74.2 L 48.2 74.3 A 1 1 0 0 0 49.2 75.2 L 49.5 74.9 L 49.2 75.2 A 1 1 0 0 0 50 75.4 L 50.2 75.1 L 50 75.4 A 1 1 0 0 0 51.4 75.6 Q 53.3 73.7 54.1 72.7 Q 56 72.1 54.4 70 Q 55.7 67.9 56.7 64.4 Q 58.1 67.3 60.8 69.2 Q 62.2 70.5 64.8 68.4 Q 70.4 62.2 68.9 53.4 Q 67.6 45.4 61.8 40.8 Q 60.3 39.1 60.3 36.8 C 60.6 21.4 39.6 25.3 41.9 38.1 Q 42.6 41.9 46.3 43.2 Q 47.1 44 46.9 44.9 Q 47 46.1 48.6 45.5 A 1 1 0 0 0 50 46.5 A 1 1 0 0 0 51 46.9 Q 52.1 48.3 53.1 47.3 Q 56.1 44.8 56.4 41.5; M 59.7 67.7 Q 52.1 51.3 47.9 63 Q 47 70.1 48.1 72.5 Q 45.6 73.2 43.2 70.8 A 1 1 0 0 0 42.1 72.4 L 43 73.1 L 42.2 72.6 A 1 1 0 0 0 42 74.1 L 42.8 74.1 L 42 74.1 A 1 1 0 0 0 42.6 75.5 L 43 75.4 L 42.6 75.5 A 1 1 0 0 0 43 76.6 Q 45.1 76.5 48.5 77.1 Q 49.9 78 51 76.4 Q 51.3 72.4 52.6 69 Q 53.3 73 54.2 74.7 Q 55.5 78.1 60.8 76.5 Q 73.6 70 71.7 53 Q 70.2 43.8 63.2 39.8 Q 60.9 37.3 61.5 35.2 C 60.5 14.5 36.1 22.9 40.6 36.9 Q 42.3 41.8 46.9 42.2 Q 48.3 43 48 44 Q 48.1 45.6 49.9 45 A 1 1 0 0 0 51.4 46.1 A 1 1 0 0 0 52.7 46.9 Q 53.2 48.6 54.6 47.8 Q 59 45.4 59.4 40.2; M 64.3 71.3 Q 53.2 51.8 47.8 62.5 Q 45.5 68.9 49.1 75.7 Q 47.8 73.2 47.3 70.9 A 1 1 0 0 0 46.4 71.3 L 46.4 71.6 L 46.3 71.5 A 1 1 0 0 0 45.4 72.3 L 45.6 72.5 L 45.4 72.3 A 1 1 0 0 0 44.7 73.3 L 44.7 73.3 L 44.7 73.3 A 1 1 0 0 0 44.2 74.4 Q 45.6 75.6 48.4 79.2 Q 52.1 83.4 52.8 78.5 Q 53.5 76.5 52.6 69 Q 53.1 74.8 54 77.1 Q 57.7 83.2 63.8 79.9 Q 76.9 70.7 74.3 53.4 Q 72.5 44.1 67.6 41.4 Q 60.9 37.3 59.9 34.3 C 57.4 7.3 27.3 21.9 35.6 37 Q 38.9 42.2 43.9 42.8 Q 44.6 43 44.9 44.3 Q 45.6 46.6 47.5 45 A 1 1 0 0 0 49.2 46.3 A 1 1 0 0 0 50.8 47.2 Q 52 48.9 53.8 47.5 Q 58 43.2 57.2 37.5; M 64.3 71.3 Q 53.2 51.8 44 61.4 Q 40.7 65.3 46.8 79.8 Q 46 77.8 45.2 76 A 1 1 0 0 0 43 76.6 L 43.5 77.1 L 42.9 76.6 A 1 1 0 0 0 41.9 77.6 L 42.5 78.1 L 41.9 77.6 A 1 1 0 0 0 41.1 79 L 41.9 79.6 L 41.1 79 A 1 1 0 0 0 40.5 80.3 Q 43.3 84.1 47.9 85.3 Q 52.8 88.5 53.1 84.5 Q 49.9 79.1 49 70.8 Q 49.9 79.1 53.1 84.5 Q 60 89.6 66.2 87.9 Q 79.6 81 77.8 53.9 Q 76 42.9 67.6 37.4 Q 64.5 35.8 63.1 33.3 C 55.4 -1.1 26.5 15.1 28.2 30.9 Q 29.1 42.5 39.3 43.7 Q 41.7 43.3 42.2 45.4 Q 42.5 49 45.4 47.6 A 1 1 0 0 0 48 47.3 A 1 1 0 0 0 50.1 47.8 Q 51.4 49 52.1 48.4 Q 58 43.2 56.1 36.5; M 64.7 75.7 Q 50.8 52.3 41.3 62.7 Q 35.2 69.3 43.3 85.8 Q 41.1 81.9 40.4 81.4 A 1 1 0 0 0 38.9 82.5 L 39.5 83.2 L 38.9 82.4 A 1 1 0 0 0 37.4 83.6 L 38.4 84.6 L 37.4 83.6 A 1 1 0 0 0 36.1 85.1 L 37.2 86 L 36.7 85.6 A 1 1 0 0 0 35.6 87.2 Q 39.5 91.2 43.5 92.8 Q 50.2 97.6 51.7 92.7 Q 48.4 90.4 45.8 75 Q 48.4 90.3 51.7 92.7 Q 58.3 98.7 67.3 96.4 Q 85.9 87.5 81.9 54 Q 77.3 37.8 67.2 33.1 Q 64.4 31.6 63.2 27 C 57.7 -6.4 19.7 -0.2 20.6 27.2 Q 22.5 40.8 35 42 Q 37.7 42 37.5 45.5 Q 37.7 47.7 41.8 46.1 A 1 1 0 0 0 45.1 46.7 A 1 1 0 0 0 47.8 46.5 Q 48.2 48.3 50 47.7 Q 59.5 38.9 53.3 31.4" dur="100s" begin="0" repeatCount="none" fill="freeze" />
		</path>

<div class="controls">
	<div class="container">
		<button onclick="setProgress(252)">40<br /><span>weeks</span></button>
		<button onclick="setProgress(224)">36<br /><span>weeks</span></button>
		<button onclick="setProgress(196)">32<br /><span>weeks</span></button>
		<button onclick="setProgress(168)">28<br /><span>weeks</span></button>
		<button onclick="setProgress(140)">24<br /><span>weeks</span></button>
		<button onclick="setProgress(112)">20<br /><span>weeks</span></button>
		<button onclick="setProgress(84)">16<br /><span>weeks</span></button>
		<button onclick="setProgress(56)">12<br /><span>weeks</span></button>
		<button onclick="setProgress(28)">8<br /><span>weeks</span></button>
		<button onclick="setProgress(0)">4<br /><span>weeks</span></button>
	</div>
</div>
<div class="slider">
	<input type="range" id="scaleSlider" min="0" max="252" step="1" value="0">
</div>
<div class="daysSection" title="Day of pregnancy">
	<span>Day:</span>
	<br />
	<span class="days"> </span>
</div>
<div class="dateSection">
	<label for="dueDate">Due date:</label>
	<input type="date" id="dueDate" value="2024-12-25">
</div>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
	background: rgb(50, 0, 108);
	font-family: "Roboto", sans-serif;
	margin: 0, auto;
}
#babyProgression {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 100%;
	width: 100%;
	max-width: 100%;
	max-height: calc(100% - 250px);
	min-height: 100px;
}
.maskLine {
	transition: d 310ms;
}
.maskLine:nth-of-type(2) {
	transition: d 300ms;
}
.controls {
	position: absolute;
	top: 50%;
	left: 15px;
	transform: translate(0%, -50%);
	height: calc(100vh - 6em);
	max-height: 600px;
}
.slider {
	position: absolute;
	display: block;
	top: 50%;
	right: 15px;
	transform: translate(0%, -50%);
	width: 50px;
	height: calc(100vh - 6em);
	max-height: 600px;
}
#scaleSlider {
	position: absolute;
	width: calc(100vh - 6em);
	max-width: 600px;
	cursor: pointer;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-90deg);
}
.container {
	display: flex;
	flex-direction: column;
	width: 45px;
	justify-content: space-between;
	height: 100%;
}

.container > button {
	cursor: pointer;
	color: rgba(255, 255, 255, 0.5);
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.5);
	flex: 1;
	margin: 0px;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 0px;
	padding-right: 0px;
	font-family: "Roboto", sans-serif;
	font-weight: bold;
}
.container > button:hover,
.container > button:focus,
.container > button:active {
	border: 1px solid #fff;
	color: #fff;
}
.container > button > span {
	font-weight: 100;
	font-size: 0.8em;
}
.daysSection {
	text-align: center;
	font-family: "Roboto", sans-serif;
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translate(-50%);
	color: rgba(255, 255, 255, 0.8);
}
.days {
	font-size: 1.5em;
	font-weight: 600;
}
.dateSection {
	text-align: center;
	font-family: "Roboto", sans-serif;
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translate(-50%);
	color: rgba(255, 255, 255, 0.8);
}
input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	cursor: pointer;
	outline: none;
	overflow: hidden;
	border-radius: 25px;
}

/* Track: webkit browsers */
input[type="range"]::-webkit-slider-runnable-track {
	height: 25px;
	background: rgb(50, 0, 108);
	border-radius: 25px;
}

/* Track: Mozilla Firefox */
input[type="range"]::-moz-range-track {
	height: 25px;
	background: rgb(50, 0, 108);
	border-radius: 25px;
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 25px;
	width: 25px;
	background-color: #a020f0;
	border-radius: 50%;
	border: 1px solid #a020f0;
	box-shadow: -407px 0 0 400px rgb(100, 0, 180);
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
	height: 25px;
	width: 25px;
	background-color: #a020f0;
	border-radius: 50%;
	border: 1px solid #a020f0;
	box-shadow: -407px 0 0 400px rgb(100, 0, 180);
}

console.log("Event Fired")
const slider = document.getElementById("animationSlider");
const scaleSlider = document.getElementById('scaleSlider');
const dateInput = document.getElementById("dueDate");

// Function to handle slider change
function handleScaleChangeScale(val) {
	const percentage = (val / 252);
	const animations = document.querySelectorAll("#babyProgression animate");
	document.querySelector('.days').textContent = parseInt(parseInt(val) + 28);
	// Change baby animations
	animations.forEach((animation) => {
		const duration = parseFloat(animation.getAttribute("dur")) || 50;
		// Calculate the target time
		let targetTime = duration * percentage;
		if (targetTime == 0){targetTime = 0.01};
		if (targetTime == 100){targetTime = 99.9};
		// Set the current time of the animation
		animation.ownerSVGElement.setCurrentTime(targetTime);
		// Freeze the animation
		animation.beginElementAt(-targetTime);
		animation.ownerSVGElement.pauseAnimations();
	});
}

function setProgress(num) {
	scaleSlider.value = num;
	handleScaleChangeScale(num);
}

// Attach event listener to the slider
scaleSlider.addEventListener('input', (event) => {
  handleScaleChangeScale(event.target.value);
});

function calculateDays() {
	const dateInputValue = dateInput.value;
	// Store the date in local storage
	localStorage.setItem("savedDueDate", dateInputValue);
	const days = daysUntil(dateInputValue);
	if ((252 - days) >= 0) {
		setProgress(252 - days);
	}
}

// Load the saved date from local storage if it exists
function loadSavedDate() {
	const savedDate = localStorage.getItem("savedDueDate");
	if (savedDate) {
		dateInput.value = savedDate;
	}
}

dateInput.addEventListener("input", calculateDays);

// Load the saved date when the page loads
loadSavedDate();
calculateDays();

Frontend Forever App